<!--  -->
<template>
  <div class="page-acm-con">
    <p-PageCard :showHelp="true" v-bind="PageCardConfig">
      <div slot="header" class="acm-title"><span class="icons"></span> 请选择该企业所属合作模式</div>
      <!-- // 默认是 body 的插槽 -->
      <div class="acm-body">
        <a-radio-group v-model="protocolType" :disabled="disabledProtocolType"  style="width: 100%;">
        <div class="acm-body-data">
          <div class="item-data">

            <p-PageCard v-bind="PageCardConfig1" style="height: 100%;">
              <div slot="header" class="acm-title"> <a-radio value="1">渠道总模式 </a-radio></div>
              <div class="item-data-body">
                <div>需提供该注册户与渠道签署的《委托代征协议》，或完成电子签署</div>
                <div>由渠道账户支付该企业的相关服务费</div>
                <div>服务费发票开具对象为渠道公司</div>
                <div>支持授权账户向渠道税费账户充值，支付税费</div>
              </div>
            </p-PageCard>

          </div>
          <div class="item-data">
            <p-PageCard v-bind="PageCardConfig1" style="height: 100%;">
              <div slot="header" class="acm-title"><a-radio value="2">非渠道总模式 </a-radio></div>
              <div class="item-data-body">
                <div>该注册户将与中雄签署《委托代征协议》</div>
                <div>仅支持企业公户或法人账户支付该企业的相关服务费</div>
                <div>服务费发票开具对象为注册户主体</div>
                <div>支持授权账户向注册户税费账户充值，支付税费</div>
              </div>
            </p-PageCard>
          </div>
        </div>
      </a-radio-group>
        <div class="acm-body-btn">
          <a-button type="primary" @click="nextEvent">下一步</a-button>
        </div>
      </div>
    </p-PageCard>
  </div>
</template>

<script>
import {Storage } from '@/utils/util'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'index',
  components: {},
  props: {
    // handA: {
    //   type: String,
    //   required: true,
    //   default: '100'
    // }
  },
  data() {
    // 这里存放数据
    return {
      disabledProtocolType:true,
      userProtocolType:'',
      registerType: '',
      protocolType:'1', // 企业所属合作模式
      PageCardConfig1:{
        // 此参数可选 表示是否显示外围边框
        isCardBorder:false,
        // 此参数可选 头部下的边框
        isHeadBottomBorder:true,
        // 此参数可选 card-body 的样式 class
        // bodyClass:{type:String,default:()=>''},
        // 此参数可选 card-body 的样式 style
        bodyStyle: {width:'100%' },
        // 此参数可选 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
        shadow: 'hover'
      },
      PageCardConfig:{
        // // 此参数可选 表示是否显示外围边框
        isCardBorder:true,
        // // 此参数可选 头部下的边框
        isHeadBottomBorder:true,
        // 此参数可选 card-body 的样式 class
        // bodyClass:{type:String,default:()=>''},
        // 此参数可选 card-body 的样式 style
        bodyStyle: {width:'100%' },
        // 此参数可选 表示是否显示阴影  always 表示一直显示  hover 表示鼠标移动上面时显示  never 表示不显示
        shadow: 'never'
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 获取当前用户的合作模式  1 渠道总  2 非渠道总  3 混合模式(此模式才能选择)
    this.userProtocolType =  Storage.get('protocolType')
    if(this.userProtocolType==3){
      this.disabledProtocolType = false
    }else{
      this.disabledProtocolType = true
    }
    this.protocolType = this.userProtocolType.toString()
    if (this.$route.query.registerType) {
      this.registerType = this.$route.query.registerType
    }
  },
  // 方法集合
  methods: {
    nextEvent(){
      if(this.isType.isEmpty(this.protocolType) || this.protocolType == 3){
        this.$message.warning('请选择企业所属合作模式！');
        return false
      }

      this.$router.push({
        path: '/enterprise/addServiceMode',
        query: {
          registerType: this.registerType, //注册类型
          protocolType:this.protocolType  //企业所属合作模式
        }
      })

    }
  },
}
</script>
<style lang="less">
.page-acm-con{
  .acm-title{
    font-size: 16px;
    font-weight: bold;
    span{
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
    .icons {
      display: inline-block;
      width: 5px;
      height: 10px;
      background: #4266E5;
      margin-right: 5px;
    }
  }
  .acm-body{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    // border-radius: 4px;
    .acm-body-data{
      width: 100%;
      display: flex;
        justify-content: space-around;
        align-items: flex-start;
      .item-data{
        // width: 200px;
        flex: 1;
        height: 300px;
        border: 1px solid #4266e5;
        border-radius: 4px;
        margin: 10px 30px;
        .item-data-body{
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          flex-direction: column;
          padding: 20px 0 20px 30px;
          div{
            font-family: SourceHanSansSC;
            font-weight: 400;
            font-size: 14px;
            color: rgb(16, 16, 16);
          }
        }
      }
    }

  }
  .p-card-con.is-always-shadow,
  .p-card-con.is-hover-shadow:focus,
  .p-card-con.is-hover-shadow:hover {
    box-shadow:  1px 3px 5px #4266e5;
  }
}
</style>
